<template>
  <div class="editAccount">
    <el-dialog
      title="修改账号"
      center
      :visible.sync="editDialogVisible"
      @open="getNameList()"
      width="40%"
      :before-close="editAccountCancel"
    >
      <el-form
        label-width="100px"
        :model="editForm"
        :rules="rules"
        ref="editForm"
      >
        <el-form-item label="员工姓名">
          <el-input
            placeholder="请输入内容"
            v-model="editForm.name"
            :disabled="true"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="选择角色" prop="roleNmae">
          <el-select v-model="editForm.rnameList" multiple placeholder="请选择">
            <el-option
              v-for="item in roleList"
              :key="item.id"
              :label="item.rname"
              :value="item.rname"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editAccountCancel">取 消</el-button>
        <el-button type="primary" @click="editAccount">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getUser, getRole } from "../../../api/account";
export default {
  name: "EditAccount",
  props: ["editDialogVisible", "editForm"],
  data() {
    return {
      nameList: [],
      roleList: [],
      userList: {},
      userRolesList: [],
      multipleSelection: [],
      restaurants: [],
      userName: {},
      accountList: { userName: "", uid: 0, id: 0, userRoles: [] },
      roleNmaeList: [
        { roleNmae: "管理员", id: 1 },
        { roleNmae: "业务线负责人", id: 2 },
        { roleNmae: "项目负责人", id: 3 },
      ],
      rules: {
        staffName: [
          { required: true, message: "请输入人员姓名", trigger: "blur" },
        ],
        roleNmae: [{ required: true, message: "请选择角色", trigger: "blur" }],
      },
    };
  },
  methods: {
    // 获取角色，和人员数据
    getNameList() {
      getUser().then((res) => {
        this.nameList = res.data;
      });
      getRole().then((res) => {
        this.roleList = res.data;
      });
      console.log(this.editForm);
    },
    // 当选择项发生变化时会触发该事件
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 取消修改按钮
    editAccountCancel() {
      this.$emit("editAccountCancel", false);
      this.$message("已取消修改");
    },
    // 确定修改按钮
    editAccount() {
      if (this.editForm.staffName == "" || this.editForm.roleNmae == "") {
        this.$message({
          message: "请填写必填项",
          type: "warning",
        });
      } else {
        this.accountList.id = this.editForm.id;
        this.accountList.uid = this.userName.uid;
        this.accountList.userName = this.userName.userName;
        let list = this.multipleSelection;
        list.forEach((element) => {
          this.accountList.userRoles.push({
            roleId: element.id,
          });
        });
        var acclist = this.accountList;
        this.$emit("editAccount", acclist, false);
        this.$message({
          message: "修改成功",
          type: "success",
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped></style>
